<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Modernizr TEST</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/script.js"></script>
</head>

<body>

<h1>Modernizr.js で html に設定される class</h1>

<p><a href="http://www.modernizr.com/">Modernizr</a>のModernizr detects support for と同じもの。</p>
<p>最新版等試したかったので必要部分だけ引っこ抜いてみた。</p>

<ul id="features">
	<li class="fontface">@font-face</li>
	<li class="canvas">Canvas</li>
	<li class="canvastext">Canvas Text</li>
	<li class="audio">HTML5 Audio</li>
	<li class="video">HTML5 Video</li>
	<li class="rgba">rgba()</li>
	<li class="hsla">hsla()</li>

	<li class="borderimage">border-image:</li>
	<li class="borderradius">border-radius:</li>
	<li class="boxshadow">box-shadow:</li>
	<li class="textshadow">text-shadow:</li>
	<li class="opacity">opacity:</li>
	<li class="multiplebgs">Multiple backgrounds</li>

	<li class="flexbox">Flexible Box Model</li>
	<li class="cssanimations">CSS Animations</li>
	<li class="csscolumns">CSS Columns</li>
	<li class="cssgradients">CSS Gradients</li>
	<li class="cssreflections">CSS Reflections</li>
	<li class="csstransforms">CSS 2D Transforms</li>

	<li class="csstransforms3d">CSS 3D Transforms</li>
	<li class="csstransitions">CSS Transitions</li>
	<li class="geolocation">Geolocation API</li>
	<li class="localstorage">localStorage</li>
	<li class="sessionstorage">sessionStorage</li>
	<li class="svg">SVG</li>

	<li class="smil">SMIL</li>
	<li class="svgclippaths">SVG Clipping</li>
	<li class="inlinesvg">Inline SVG</li>
	<li class="draganddrop">Drag and Drop</li>
	<li class="hashchange">hashchange</li>
	<li class="postmessage">X-window Messaging</li>

	<li class="history">History Management</li>
	<li class="applicationcache">applicationCache</li>
	<li class="touch">Touch events</li>
	<li class="websockets">Web Sockets</li>
	<li class="webworkers">Web Workers</li>
	<li class="websqldatabase">Web SQL Database</li>

	<li class="webgl">WebGL</li>
	<li class="indexeddb">IndexedDB</li>
	<li class="inputtypes">Input Types<sup>†</sup></li>
	<li class="input">Input Attributes<sup>‡</sup></li>
</ul>

<div id="log"></div>

<script type="text/javascript">
<!-- 
$(function() {
	$("#log").append("jQueryのバージョンは" + $.fn.jquery);
	$("#log").append("<br />Modernizrのバージョンは" + Modernizr._version);

	var classs = $("html").attr("class");
	var classt = $.trim(classs);

	$("#log").append("<br />html の class は" + classt);

});
// -->
</script>

<style type="text/css">
 .fontface li.fontface:after
,.audio li.audio:after
,.video li.video:after
,.geolocation li.geolocation:after
,.canvas li.canvas:after
,.canvastext li.canvastext:after
,.rgba li.rgba:after
,.hsla li.hsla:after
,.multiplebgs li.multiplebgs:after
,.borderimage li.borderimage:after
,.borderradius li.borderradius:after
,.boxshadow li.boxshadow:after
,.opacity li.opacity:after
,.cssanimations li.cssanimations:after
,.csscolumns li.csscolumns:after
,.cssgradients li.cssgradients:after
,.cssreflections li.cssreflections:after
,.csstransforms li.csstransforms:after
,.csstransforms3d li.csstransforms3d:after
,.csstransitions li.csstransitions:after
,.localstorage li.localstorage:after
,.sessionstorage li.sessionstorage:after
,.webworkers li.webworkers:after
,.applicationcache li.applicationcache:after
,.svg li.svg:after
,.smil li.smil:after
,.svgclippaths li.svgclippaths:after
,.hashchange li.hashchange:after
,.websqldatabase li.websqldatabase:after
,.indexeddb li.indexeddb:after
,.websockets li.websockets:after
,.draganddrop li.draganddrop:after
,.history li.history:after
,.postmessage li.postmessage:after
,.inlinesvg li.inlinesvg:after
,.webgl li.webgl:after
,.touch li.touch:after
,.flexbox li.flexbox:after
,.textshadow li.textshadow:after
{
    content: "　○";
}
#features {
    -moz-column-count: 2;
    -moz-column-gap: 0;
}
ul{
	width:500px;
}
li{
	list-style:none;
	background:#efefef;
	border-right:1px outset #ccc;
	border-bottom:1px outset #ccc;
	padding-left:5px;
}
</style>



</body>
</html>
